<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
  </head>
</head>
<style>
    #bigbox {
        width: 1000px;
        height: 200px;
        margin: auto;
        text-align: center;
    }
</style>

<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
        添加座位信息
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">输入座位信息</h4>
                </div>
                <div class="modal-body xinxi_box">
                    <div class="form-group ">
                        <input type="text" class="form-control" id="goodsname" placeholder="几号电影院（仅输入数字）">
                    </div>
                    <div class="form-group ">
                        <input type="text" class="form-control" id="goodsname" placeholder="共几排（仅输入数字）">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="goodsname" placeholder="共几列（仅输入数字）">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary tj_btn">提交</button>
                </div>
            </div>
        </div>
    </div>

    <div id="bigbox"></div>
    <div id="bigbox1"></div>
    <button id="mai">购买</button>

    <script>

        //  获取本地数据
        function getSetsDate(keyName, data = null, isPush = false) {

            let localData = localStorage.getItem(keyName) ?
                JSON.parse(localStorage.getItem(keyName)) : []
            if (data) {

                if (isPush) {

                    localData.push(data)
                    localStorage.setItem(keyName, JSON.stringify(localData)) //  设置本地存储
                } else {

                    localStorage.setItem(keyName, JSON.stringify(data))
                }
            }
            return localData
        }
        /**需求
         * 1 通过表单输入框输入几行几列显示生成座位
         * （1） 创建表格 输入框有3个 几号电影院 行，列 , 一个按钮
         * （2） 把数据存入本地中  如 3行 5列 
         * （3）数据格式[
         *          [{},{},{},{},{},{}],
         *          [{},{},{},{},{},{}],
         *          [{},{},{},{},{},{}]
         *             ]
         * （4）如何实现
         *  (5)点击提交后得到行 和 列 的数字  如 hangVal  lieVal
         * （5）本地存储一个数组，输入的行的数量是一个长度，循环长度让本地push length个[]
         *                       输入的列的数量也是一个长度，循环本地中的每一个[]push length个{} 可以用2个for循环实现
         *                       对象里的状态 status:0  //0未卖(白色) 1已卖(红色) 2维护(灰色) 3正在选择(绿色)
         *                       对象里有一些固定的内容{
         *                                              status:0
         *                                              name:
         *                                            }
         *                       let localDate = getSetsDate('zuowei')
         *                       for(var i=0; i<hangVal; i++){
         *                          localDate.push([])
         *                       for(var j=0; j<lieVal; j++){
         *                           localDate[i].push({
         *                                          status:0
         *                                          name:`${i+1}排${j+1}列`
         *                                             })
         *                                                  }
         *                                                     }
         * (6) 渲染页面 -> 本地赋值给一个变量后，通过变量.length得到行的长度，变量[0].length得到列的长度
         *                 通过两个for循环渲染页面
         *                  for(var i=0; i<hang.lenght; i++){
         *                  for(var j=0; j<lie.length; j++){
         *                  str +=`<div style="width:50px;height:50px;border border: 1px solid skyblue;"><div>`
         *                                      }
         *                  str+=`<br></br>`
         *                                    }
         *                  $('#box').html(str)
         *                                                                  
         * 
        */
        $(function () {
            $('.tj_btn').click(xinxiFn) //获取行列信息
            show()
            $('#bigbox').click(colorFn)
            colorshow()
            priceFn()
            $('#mai').click(redFn)
        })
        //获取行列信息
        function xinxiFn() {
            let hao = $('.xinxi_box input').eq(0).val()
            let paiLength = $('.xinxi_box input').eq(1).val()
            let lieLength = $('.xinxi_box input').eq(2).val()
            let xinxi = getSetsDate('xinxi')
            for (var i = 0; i < paiLength; i++) {
                xinxi.push([])
                for (var j = 0; j < lieLength; j++) {
                    xinxi[i].push({
                        status: 0,
                        name: `${i + 1}排${j + 1}列`,
                        price: 30
                    })
                }
            }
            getSetsDate('xinxi', xinxi)
            show()
        }
        //渲染列表
        function show() {
            let str = ``
            let str1 = ``
            let xinxiArr = getSetsDate('xinxi')
            for (let i in xinxiArr) {
                for (let j in xinxiArr[i]) {
                    str += `
               <div style="width: 100px;height: 50px;border: 1px solid skyblue; float: left;" dataH='${i}' dataL='${j}'>${Number(i) + 1}排 ${Number(j) + 1}坐 </div>
               `
                }
                str += `<p style="clear:both"></p>`
            }
            $('#bigbox').html(str)

        }
        //事件委托
        function colorFn() {
            let indexH = $(event.target).attr('dataH')
            let indexL = $(event.target).attr('dataL')
            let xinxiArr = getSetsDate('xinxi')
            if (xinxiArr[indexH][indexL].status == 3) {
                xinxiArr[indexH][indexL].status = 0
            } else if (xinxiArr[indexH][indexL].status == 0) {
                xinxiArr[indexH][indexL].status = 3

            }
            getSetsDate('xinxi', xinxiArr)
            colorshow()
            priceFn()

        }

        //根据status值 变色
        function colorshow() {
            let xinxiArr = getSetsDate('xinxi')
            for (let i in xinxiArr) {
                for (let j in xinxiArr[i]) {
                    if (xinxiArr[i][j].status == 0) {
                        $('#bigbox div').each(function (index, item) {
                            if ($(item).attr('datah') == i && $(item).attr('datal') == j) {
                                $(item).css('background', 'white')
                            }
                        })
                    } else if (xinxiArr[i][j].status == 1) {
                        $('#bigbox div').each(function (index, item) {
                            if ($(item).attr('datah') == i && $(item).attr('datal') == j) {
                                $(item).css('background', 'red')
                            }
                        })
                    }
                    else if (xinxiArr[i][j].status == 2) {
                        $('#bigbox div').each(function (index, item) {
                            if ($(item).attr('datah') == i && $(item).attr('datal') == j) {
                                $(item).css('background', '#ccc')
                            }
                        })
                    }
                    else if (xinxiArr[i][j].status == 3) {
                        $('#bigbox div').each(function (index, item) {
                            if ($(item).attr('datah') == i && $(item).attr('datal') == j) {
                                $(item).css('background', 'green')
                            }
                        })
                    }
                }
            }
        }

        //点击购买改值
        function priceFn() {
            let xinxiArr = getSetsDate('xinxi')
            let str = ``
            let ss = 0
            for (let i in xinxiArr) {
                for (let j in xinxiArr[i]) {
                    if (xinxiArr[i][j].status == 3) {
                        ss += Number(xinxiArr[i][j].price)
                        $('#mai').html(`共${ss}元 确定购买`)
                        str += `<span  style="width: 100px;height: 50px;border: 1px solid skyblue; float: left;">
                            ${[Number(i) + 1]}排${Number(j) + 1}坐 <br>
                            ${xinxiArr[i][j].price}元
                            <button onclick="del(${i},${j})">❌</button>
                            </span>`
                    }
                }
                $('#bigbox1').html(str)
            }
        }

        function redFn() {
            let xinxiArr = getSetsDate('xinxi')
            for (let i in xinxiArr) {
                for (let j in xinxiArr[i]) {
                    if (xinxiArr[i][j].status == 3) {
                        xinxiArr[i][j].status = 1
                        getSetsDate('xinxi', xinxiArr)
                    }
                }
            }

            colorshow()
        }

        function del(i, j) {
            console.log(i, j);
            let xinxiArr = getSetsDate('xinxi')
            xinxiArr[i][j].status = 0
            getSetsDate('xinxi', xinxiArr)
            priceFn()
            colorshow()
        }
    </script>
</body>

</html>